<template>
    <el-dialog title="编辑" :width="width"
             :visible.sync="isShowVisible"
             center :close-on-click-modal="false"
             :before-close="() => close()">
        <el-row :gutter="20" v-if="isShowFunction">
            <el-col :span="20">
                <MonacoEditor
                    height="700"
                    theme="vs-dark"
                    :code="code"
                    :language="language"
                    @mounted="onMounted"
                    :editorOptions="options"
                ></MonacoEditor>
            </el-col>
            <el-col :span="4" style="height: 700px;overflow: auto;" v-loading="isLoading">
                <el-popover v-for="item in functionList" :key="item.fid"
                    placement="left-start"
                    width="400"
                    trigger="click"
                    :content="item.fdescription">
                    <el-tag slot="reference" style="cursor: pointer;display: block;margin-bottom: 5px;" onselectstart="return false" @dblclick.native="addFunction(item.fservice,item.ffunction)"
                        effect="dark">
                        {{ item.fname }}
                    </el-tag>
                </el-popover>
            </el-col>
        </el-row>
        <el-row v-else>
             <MonacoEditor
                height="700"
                theme="vs-dark"
                :code="code"
                :language="language"
                @mounted="onMounted"
                :editorOptions="options"
            ></MonacoEditor>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveData">保存</el-button>
            <el-button @click="close()">取消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import MonacoEditor from 'vue-monaco-editor';
import TieFunctionApi from '@/api/module/TieFunctionApi'
export default {
    name: 'AcMonaco',
    components: {
        MonacoEditor
    },
    props: {
        language: {type : String , default : 'java'},
        code: {type : String , default : ''},
        width : {type : String , default : '80%'},
        isShowFunction : {type : Boolean,default:false}
    },
    data() {
        return {
            editor:null,
            isShowVisible:true,
            isOk:false,
            options: {
                selectOnLineNumbers: true,
                roundedSelection: false,
                readOnly: false,
                automaticLayout: true,
                glyphMargin: true,
                showFoldingControls: "always",
                formatOnPaste: true,
                formatOnType: true,
                folding: true,
            },
            api:new TieFunctionApi(),
            functionList:[],
            isLoading:false,
        }
    },
    mounted() {
    },
    async created(){
        if(this.isShowFunction){
            this.isLoading = true
            let data = await this.api.queryList();
            this.functionList =  data.data
            this.isLoading = false
        }
    },
    methods: {
        addFunction(fservice,ffunction){
            let text = fservice+'.'+ffunction+'()'
            var selection = this.editor.getSelection();
            let startLineNumber = selection.startLineNumber
            let startColumn = selection.startColumn
            let endLineNumber = selection.endLineNumber
            let endColumn = selection.endColumn
            this.editor.executeEdits('insert-code', [
            {
                range: {
                    startLineNumber,startColumn,endLineNumber,endColumn
                },
                text,
            },
            ])
        },
        onMounted (editor) {
            this.editor = editor;
        },
        getVal() {
            return this.editor.getValue()
        },
        close(){
            this.$emit('close',this.isOk)
        },
        saveData(){
            this.isOk = true
            this.$emit('saveCode',this.getVal())
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/.el-dialog__body{
    overflow: hidden;
}
</style>